<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="template" id="myComponent"></script>
    <script>
        window.onload=function() {
            Vue.component('my-component',{
                props:['total'],
                template:'#myComponent'
            })
            var app4 = new Vue({
                el: '#app-4',
                methods: {
                    addthing: function () {
                        this.todos.push({name: this.thing,done:false});
                    },
                    switchdel:function(idx){
                        this.todos[idx].done=!this.todos[idx].done;
                    }
                }
                ,
                data: {
                    thing:null,
                    message: 'Todo List',
                    todos:[
                        { name: '吃饭',done:false },
                        { name:'睡觉', done:false},
                        { name:'哈哈哈',done:true}

                    ]
                },
                computed:{
                    done:function(){
                        var count=0;
                        for (var i=0;i<this.todos.length;i++){
                            if (this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }
            });
        }

    </script>
    <style>.del{text-decoration: line-through;}</style>
</head>
<body>
<div id="app-4">
    <p>{{message}}</p>
    <input type="text" v-model="thing"/>
      <button v-on:click="addthing">添加</button>
<div v-for ="(todo,idx) in todos">
    <input type="checkbox":checked="todo.done"@click="switchdel(idx)">{{idx}}.
    <span :class ="{del:todo.done}">
        {{todo.name}}</span>
</div>
  <todo-word :total = "todos.length"></todo-word> {{done}}个已完成，{{todos.length - done}}个未完成。
</div>
</body>
</html>